<script setup>
import { ref, computed, reactive, nextTick } from "vue";
import MdEditor from "md-editor-v3"; //引入markdown
import "md-editor-v3/lib/style.css";
import store from "../../store/index";
import { Plus } from "@element-plus/icons-vue";
store.dispatch("teacher/getList");
const list = computed(() => store.state.teacher.list);

// 图片上传
const beforeAvatarUpload = function () {};
// 图片上传成功
const handleAvatarSuccess = function () {};

// 表单验证
let ruleForm = reactive({
  name: "",
  phone: "",
  village: "", //校区
  class: "", //年级
  teacherType: "", //教师类型
  address: "", //联系地址
  subject: "", //学科
  resource: "", //是否推荐到主页
  avatar: "",
});
const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入教师姓名",
      trigger: "blur",
    },
    {
      min: 3,
      max: 5,
      message: "必须3-5个字符",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入电话号",
      trigger: "change",
    },
    {
      min: 11,
      max: 13,
      message: "必须11位数字",
      trigger: "blur",
    },
  ],
  village: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  class: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  teacherType: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  address: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
  ],
  subject: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
});
//抽屉开关
const drawer = ref(false);
const handleClose = () => {
  drawer.value = !drawer.value;
};
const direction = ref("rtl");

const from = ref({});

const search = ref("");
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
const handleEdit = async () => {
  drawer.value = !drawer.value;
  console.log(ruleForm);
  const rowclone = { ...row };
  nextTick(() => {
    // ruleForm=rowclone
    // console.log(ruleForm,123);
  });

  console.log(row);
};
const handleDelete = () => {
  console.log(index, row);
};
// 分页
const currentPage = ref(1);
const handleSizeChange = () => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = () => {
  console.log(`current page: ${val}`);
};

// 数据
// 表单提交
const submitForm = (ruleForm) => {
  store.dispatch("teacher/setList",ruleForm)
};
// console.log(ruleForm);
</script>
<template>
  <el-row>
    <el-col :span="24">
      <el-button
        :span="12"
        color="#626aef"
        @click="drawer = true"
        style="margin-left: 16px"
        >新增</el-button
      >
      <!-- 弹出框 -->
      <el-drawer
        v-model="drawer"
        title="新增"
        :direction="direction"
        :before-close="handleClose"
      >
        <!-- 表单 -->
        <el-form
          ref="form"
          :rules="rules"
          :model="ruleForm"
          :size="formSize"
          class="demo-ruleForm"
          label-width="130px"
        >
          <el-form-item label="教师姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <!-- 图片上传 -->
          <el-form-item label="头像" style="marign-left: 5px">
            <el-upload
              list-type="picture-card"
              v-model="ruleForm.avatar"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-icon class="icon"><plus /></el-icon>
            </el-upload>
          </el-form-item>
          <span class="icon-span">建议尺寸120*90像素 ,大小不要超过1M</span>
          <el-form-item label="校区" prop="village">
            <el-select v-model="ruleForm.village" placeholder="请选择校区">
              <el-option label="请选择" value="dispaly"></el-option>
              <el-option label="海淀区" value="shanghai"></el-option>
              <el-option label="昌平区" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级" prop="class">
            <el-select v-model="ruleForm.class" placeholder="至少选择一个年级">
              <el-option label="一年级" value="shanghai"></el-option>
              <el-option label="二年级" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教师类型" prop="teacherType">
            <el-select
              v-model="ruleForm.teacherType"
              placeholder="请选择教师类型"
            >
              <el-option label="授课老师" value="shanghai"></el-option>
              <el-option label="销售老师" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="学科" prop="subject">
            <el-select v-model="ruleForm.subject" placeholder="请选择一门学科">
              <el-option label="语文" value="shanghai"></el-option>
              <el-option label="数学" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否推荐到首页" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="是" value="1"></el-radio>
              <el-radio label="否" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="课程介绍" prop="curriculum">
            <!-- markdown -->
            <md-editor v-model="ruleForm.curriculum" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleForm)"
              >确定</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
      <el-button color="#626aef" style="margin-left: 20px" plain
        >批量删除</el-button
      ></el-col
    >
    <el-col class="qu">
      <el-row>
        <el-col :span="6">
          <el-form>
            <el-form-item label="校区">
              <el-select v-model="ruleForm.village" placeholder="请选择校区">
                <el-option label="海淀区" value="shanghai"></el-option>
                <el-option label="东城区" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-autocomplete
            style="display: inline-block"
            v-model="ruleForm.name"
            :trigger-on-focus="false"
            class="inline-input"
            placeholder="请输入教师名称"
          />
        </el-col>
        <el-button type="primary">筛选</el-button>
      </el-row>
    </el-col>
  </el-row>
  <el-table :data="list" style="width: 100%">
    <el-table-column type="selection" label="选择" width="55" />
    <el-table-column label="教师名称" prop="name" />
    <el-table-column label="手机号" prop="phone" />
    <el-table-column label="校区" prop="village" />
    <el-table-column label="年级" prop="class" />
    <el-table-column label="教师类型" prop="teacherType" />
    <el-table-column label="学科" prop="subject" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--  -->

  <!--  -->
  <el-row class="fy">
    <!-- 分页 -->
    <el-col>
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="95"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-col>
  </el-row>
</template>

<style scoped>
.el-form-item__label {
  width: 130px;
  vertical-align: top !important;
  text-align-last: justify !important;
  /* text-align: left !important; */
}
/* 图片上传css */
.el-drawer__bodyel-table >>> .el-upload .el-upload--text {
  border: 1px solid #201616;
}
.el-drawer__bodyel-table >>> .avatar-uploader .el-upload {
  border: 1px dashed #201616;
  border-radius: 6px;
  text-align: right;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-drawer__bodyel-table >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.qu {
  margin-top: 20px;
}
.fy {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.el-col {
  margin-right: 0;
}
.icon-span {
  display: block;
  text-align: center;
  position: relative;
  bottom: 15px;
}
</style>